<template>
	<view>
		<cu-custom bgColor="bg-blue2" :isBack="true" @back="backedPage"><block slot="backText">返回</block><block slot="content">我的</block></cu-custom>

			<view class="header">
				<image :src="user.avatar"></image>
			</view>

		<view class="cu-bar solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>基本信息
			</view>
		</view>
		<view class="padding-lr padding-tb-xs">
			<view class="uni-flex uni-row">
				<view class="flex-item-30">用户名</view>
				<view class="flex-item-70">{{user?user.name:''}}</view>
			</view>
		</view>
		<view class="padding-lr padding-tb-xs">
			<view class="uni-flex uni-row">
				<view class="flex-item-30">电话</view>
				<view class="flex-item-70">{{user?user.phone:''}}</view>
			</view>
		</view>
		<view class="padding-lr padding-tb-xs">
			<button class="cu-btn block shadow bg-gradual-blue margin" @tap="modifyPass">修改密码</button>
			<!-- <button class="cu-btn block shadow bg-gradual-orange margin" @tap="appUpgrade">软件更新</button> -->
			<button class="cu-btn block shadow bg-white margin text-red" @tap="logout">退出登录</button>
		</view>
		<view v-if="appInfo.version" class="text-grey text-center">
			{{appInfo.name}} {{appInfo.version}}
		</view>
		<uni-popup ref="modifyPassPopup" type="bottom" :custom="true">
			<view class="uni-share uni-share-padding-bottom">
				<view style="padding: 30upx;">
<!-- 					<form>
						<view class="cu-form-group">
							<view class="title">原密码</view>
							<input password placeholder="原密码" name="oldPassword" v-model="item.oldPassword"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">新密码</view>
							<input password placeholder="新密码" name="newPassword" v-model="item.newPassword"></input>
						</view>
					</form> -->
					<u-form :model="form" :rules="rules" ref="uForm">
					    <u-form-item label="原密码" label-width="60" prop="oldPassword">
					        <u-input type="password" v-model="form.oldPassword" placeholder="请填写原密码" />
					    </u-form-item>
						
					    <u-form-item label="新密码" label-width="60" prop="newPassword">
					        <u-input type="password" v-model="form.newPassword" placeholder="请填写新密码" />
					    </u-form-item>
					</u-form>
					<view class="flex">
						<view class="flex-sub margin-sm">
							<button class="cu-btn block bg-blue margin" @tap="okClick">确认</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import md5 from '@/common/lib/md5.min.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			uniPopup
		},
		computed: {
			...mapGetters(['user'])
		},
		data() {
			const validatePassword = (rule, value, callback) => {
			  if (value.length === 0) {
			    callback(new Error('请输入新密码'))
			  }else if (value.length < 6) {
				callback(new Error('密码长度必须大于6位'))
			  } else {
				callback()
			  }
			}
			return {
				errorType: ['message'],
				show :false,
				appInfo: {
					version: '',
					name: ''
				},
				form:{
					oldPassword: '',
					newPassword: '',
				},
				rules: {
				    oldPassword: [
				        {
				            type: 'string',
							required: true,
				            message: '请输入原密码',
				            trigger: ['blur', 'change'],
				        }
				    ],
				    newPassword: [
				        {
				            type: 'string',
							required: true,
				            // message: '请输入新密码',
				            trigger: ['blur', 'change'],
							validator: validatePassword
				        }
				    ],
				},
			}
		},
		watch:{
			show:{
				
				handler(value){
					
					this.$nextTick(()=>{ //在弹窗加载出来只有 show 才会变成 true
						
						if( value == true ){ //判断 弹窗 v-model 变成 true 的时候去加载规则。 原理：在弹窗渲染完成之后表单渲染完成之前去加载规则就不会报错了
							this.$refs.uForm.setRules(this.rules);
						}
						
					})
					
				},
				
			},
			immediate: true, // 重点
			deep: true, // 重点
			
		},
		onReady() {
			// this.$nextTick(()=>{
			// 	this.$refs.uForm.setRules(this.rules);
			// })
		},
		onLoad() {
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
				this.appInfo.version = wgtinfo.version
				this.appInfo.name = wgtinfo.name
			})
			//#endif
		},
		methods: {
			okClick() {
				this.$refs.uForm.validate().then(res => {
					const data = {
						currentPassword: this.form.oldPassword,
						newPassword: this.form.newPassword
				    }
					
					this.$minApi.updatePassword(data).then(res => {
						if (res.statusCode === 204) {
							this.$refs.modifyPassPopup.close()
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							setTimeout(() => {
								this.logout()
							}, 2000)
						} else {
							uni.showToast({
								title: '原密码不正确！',
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '原密码不正确！',
							icon: 'none'
						})
					})
				})
			},
			modifyPass() {
				this.$refs.modifyPassPopup.open()
				this.show = true
			},
			logout() {
				this.$store.dispatch('logout')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			/**
			 * app整包更新检测
			 */
			appUpgrade() {
				//#ifndef APP-PLUS
				uni.showToast({
					title: '目前只支持Android版本软件更新',
					icon: 'none'
				})
				//#endif
				//#ifdef APP-PLUS
				uni.getSystemInfo({
					success: sysInfo => {
						let platform = sysInfo.platform
						plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
							// this.appInfo.version = wgtinfo.version
							// this.appInfo.name = wgtinfo.name
							let params = {
								appid: plus.runtime.appid,
								version: wgtinfo.versionCode,
								platform: platform
							}
							this.$minApi.findUpgradeApp(params).then(appRes => {
								if (appRes.appid) {
									uni.showModal({
										title: "下载更新提示",
										content: appRes.note,
										showCancel: false,
										confirmText: '确定',
										success: sucRes => {
											if (sucRes.confirm) {
												plus.runtime.openURL(appRes.url)
												// uni.downloadFile({
												//     url: appRes.url,
												//     success: res => {}
												// })
											}
										}
									})
								} else {
									uni.showToast({
										title: '已经是最新版本了。',
										icon: 'none'
									})
								}
							})
						})
					}
				})
				//#endif
			},
			backedPage() {
				uni.switchTab({
					url: '/pages/main/index'
				})
			}
		}
	}
</script>

<style>
	/* 头部 logo */
	.header {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
	}
	.header image{
		width: 110rpx;
		height: 110rpx;
		border-radius:50%;
	}
</style>
